<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,mininum-scale=1.0,maxinum-scale=1.0,user-scalable">
    <title>Document</title>
    <link rel="stylesheet" href="fonts/mui.ttf">
    <link rel="stylesheet" href="css/mui.min.css">
    <link rel="stylesheet" href="css/goods-details.css">
   
</head>

<body>
    <!-- 导航栏 -->
    <header id="header" class="mui-bar mui-bar-nav">
        <h1 class="mui-title">商品详情</h1>
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    </header>
    <!-- 轮播 -->
    <div class="goods">
        <div class="mui-slider">
            <div class="mui-slider-group mui-slider-loop">
                <!--支持循环，需要重复图片节点-->
                <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="4.jpg" /></a></div>
                <div class="mui-slider-item"><a href="#"><img
                            src="https://p0.meituan.net/movie/ca0fcdcaf9334f61ccf3b31d2275424c161996.jpg@750w_750h_2e" /></a>
                </div>
                <div class="mui-slider-item"><a href="#"><img
                            src="https://p1.meituan.net/movie/36326eb6b51a4401bf210c8533ff9615103310.jpg@750w_750h_2e" /></a>
                </div>
                <div class="mui-slider-item"><a href="#"><img
                            src="https://p0.meituan.net/movie/840a8d403ceb0c0955b849bb8081339798762.jpg@750w_750h_2e" /></a>
                </div>
                <div class="mui-slider-item"><a href="#"><img
                            src="https://p0.meituan.net/movie/f5b7ccbebb7c42d8b60b73fba329d88d99051.jpg@750w_750h_2e" /></a>
                </div>
                <div class="mui-slider-item"><a href="#"><img
                            src="https://p0.meituan.net/movie/027f12b2b014f03010344bb7891d211e102443.jpg@750w_750h_2e" /></a>
                </div>

                <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
                <div class="mui-slider-item mui-slider-item-duplicate">
                    <a href="#">
                        <img src="https://p0.meituan.net/movie/027f12b2b014f03010344bb7891d211e102443.jpg@750w_750h_2e">
                    </a>
                </div>
            </div>
            <div class="mui-slider-indicator">
                <div class="mui-indicator mui-active"></div>
                <div class="mui-indicator"></div>
                <div class="mui-indicator"></div>
                <div class="mui-indicator"></div>
                <div class="mui-indicator"></div>
            </div>
        </div>
        <!-- 详情介绍 -->
        <div class="cat-eye-shopping-details-introduced">
            <div class="all-prise">
                <div class="small-prise">
                    <span>¥</span>
                    <span>349</span>
                </div>
                <div class="big-prise">
                    <span>原价698</span>
                </div>
            </div> 
            <div class="goods-name">
                <p>阴阳师大天狗粘土手办</p>
            </div>
        </div>
        <div class="original">
            <p>正版授权</p>
        </div>
        </div>
    <!-- 商品详情 -->
    <div class="goods-box">
        <!-- 3个列表 -->
        <div class="explain">
            <ul>
                <li>商品详情</li>
                <li>购买须知</li>
                <li>相关推荐</li>
            </ul>
        </div>
        <div class="line"></div>
        <div class="color-line">

        </div>
        <!-- 套餐详情 -->
        <div class="big-box">       
            <div class="package-details">
                <p>套餐详情</p>
            </div>
            <!-- 阴阳师大天狗粘土手办 1元 ¥698 -->
            <div class="dog">
                <div class="dog-name">
                    阴阳师大天狗粘土手办
                </div>
                <div class="yiyuan">
                    1元
                </div>
                <div class="dog-prise">
                    <p>¥698</p>
                </div>
            </div>
            <!-- 地址 -->
            <div class="add">
                <div class="brand">
                    <span>品牌：</span><span>阴阳师大天狗粘土手办</span>
                </div>
                <div class="add-small">
                    <span>产地：</span><span>广州</span>
                </div>         
            </div>
            <!-- 3个长图片 -->
            <div class="dog-img">
                <img src="https://p1.meituan.net/movie/5b197f0928f7c38857b0687b5db6961a1001054.jpg" alt="">
                <img src="https://p1.meituan.net/movie/0828a3ee152ee76b28d822cb51aea0e01004331.jpg" alt="">
                <img src="https://p1.meituan.net/movie/eca971bd91459981ab928d26606c664f110716.jpg" alt="">
            </div>
        </div>
        <!-- 售后细节 -->
        <div class="after-sales">
            <div class="imformation">
                <p>售后须知</p>
            </div>
            <div class="imformation-speak">
                <p>本产品由广州玺第纳啡数字营销策划有限公司负责销售、发货、开票以及售后服务</p>
            </div>
            <div class="imformation">
                <p>商家QQ</p>
            </div>
            <div class="imformation-speak">
                <p>2476744100</p>
            </div>
            <div class="imformation">
                <p>产品咨询</p>
            </div>
            <div class="imformation-speak">
                <p>商家电话：36092984；联系时间：09:00-18:00</p>
            </div>
            <div class="imformation">
                <p>配送范围</p>
            </div>
            <div class="imformation-speak">
                <p>全国（除港澳台外）均可配送</p>
            </div>
            <div class="imformation">
                <p>快递公司</p>
            </div>
            <div class="imformation-speak">
                <p>本单使用圆通快递（95554/021-69777888）</p>
            </div>
            <div class="imformation">
                <p>配送费用</p>
            </div>
            <div class="imformation-speak">
                <p>本单包邮，配送范围内无需再额外支付邮费</p>
            </div>
            <div class="imformation">
                <p>配送时段</p>
            </div>
            <div class="imformation-speak">
                <p>下单后 2-3 天</p>
            </div>
            <div class="imformation">
                <p>售后保障</p>
            </div>
            <div class="imformation-speak">
                <p>如需退换货，请进入我的订单</p>
            </div>
        </div>
        <!-- 相关推荐 -->
        <div class="recommend">
            <div class="relate">
                
            </div>
        </div>
    </div>
     <!-- 相关推荐 -->
    <div class="relate-commond">
        <div class="relate-text">相关推荐</div>
        <div class="three-img">
            <div class="commond-goods">
                <img src="https://p0.meituan.net/movie/b8ba2c31198f122420a48571bc55f8a6333679.jpg@348w_348h_2e" alt="">
                <div class="commond-intro">
                    <p>阴阳师绮花物语礼盒</p>
                </div>
                <div class="commond-prise">
                    <div class="commond-low-prise">
                        <p>¥168</p>
                    </div>
                    <div class="commond-height-prise">
                        <p>¥336</p>
                    </div>
                </div>
            </div>
            <div class="commond-goods">
                <img src="https://p0.meituan.net/movie/eab262eaeaf3156bceb30f2b6abbd1a3304527.jpg@348w_348h_2e" alt="">
                <div class="commond-intro">
                    <p>阴阳师神秘符咒925银吊坠</p>
                </div>
                <div class="commond-prise">
                    <div class="commond-low-prise">
                        <p>¥198</p>
                    </div>
                    <div class="commond-height-prise">
                        <p>¥396</p>
                    </div>
                </div>
            </div>
            <div class="commond-goods">
                <img src="https://p0.meituan.net/movie/65dc9c8e510cd277d01ed5b467c399c8234369.jpg@348w_348h_2e" alt="">
                <div class="commond-intro">
                    <p>阴阳师犬神毛绒气囊帽</p>
                </div>
                <div class="commond-prise">
                    <div class="commond-low-prise">
                        <p>¥79</p>
                    </div>
                    <div class="commond-height-prise">
                        <p>¥158</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 第二行图片 -->
        <div class="three-img">
            <div class="commond-goods">
                <img src="https://p0.meituan.net/movie/4d981919d6fa04fabb1366f8d89623a2589173.jpg@348w_348h_2e" alt="">
                <div class="commond-intro">
                    <p>阴阳师结缘吊坠</p>
                </div>
                <div class="commond-prise">
                    <div class="commond-low-prise">
                        <p>¥159</p>
                    </div>
                    <div class="commond-height-prise">
                        <p>¥318</p>
                    </div>
                </div>
            </div>
            <div class="commond-goods">
                <img src="https://p0.meituan.net/movie/eab262eaeaf3156bceb30f2b6abbd1a3304527.jpg@348w_348h_2e" alt="">
                <div class="commond-intro">
                    <p>阴阳师神秘符咒925银吊坠</p>
                </div>
                <div class="commond-prise">
                    <div class="commond-low-prise">
                        <p>¥168</p>
                    </div>
                    <div class="commond-height-prise">
                        <p>¥336</p>
                    </div>
                </div>
            </div>
            <div class="commond-goods">
                <img src="https://p0.meituan.net/movie/d53fdd287da37ec2e1df1f6f9c90eca4360153.jpg@348w_348h_2e" alt="">
                <div class="commond-intro">
                    <p>阴阳师玉藻前背包</p>
                </div>
                <div class="commond-prise">
                    <div class="commond-low-prise">
                        <p>¥128</p>
                    </div>
                    <div class="commond-height-prise">
                        <p>¥256</p>
                    </div>
                </div>
            </div>
    </div>
    <!-- 最后更多和换一换 -->
    <div class="last">
        <div class="more">
            <a href="#">  <span>更多</span></a>
           
             <i class="icon mui-icon mui-icon-arrowright"></i>
        </div>
        <div class="batch">
                <span>换一批</span>
                <i class="icon mui-icon mui-icon mui-icon-reload"></i>        
        </div>
    </div>
    <!-- 底部固定导航 -->
    <div class="bottom-nav">
        <div class="buy">
            <a href="#"> 立即购买</a>
        </div>
    </div>
</body>
<script src="js/mui.min.js"></script>
<script>
    (function () {
        function w() {
            var all = document.documentElement;
            var test = all.getBoundingClientRect().width;
            console.log(123, test)
            if (test > 750) {
                test = 750;
            }
            rem = test / 18.75;
            // rem = test / 37.5;
            all.style.fontSize = rem + 'px'
        }
        w();
        window.addEventListener("resize", function () {
            w()
        }, false)
    })();
    // 轮播
    //获得slider插件对象
    var gallery = mui('.mui-slider');
    gallery.slider({
        interval: 2000//自动轮播周期，若为0则不自动播放，默认为0；
    });
</script>

</html>